<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 场景4 -->
        <!-- <style>
            div{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>  -->
    <!-- 场景4 -->
        <style>
            div{
                width: 100px;
                height: 100px;
                background: lightgray;
            }
        </style>

    <!-- 场景 1  start -->
    <script defer src="../js/logDiv.js"></script>
    <link rel="stylesheet" href="../css/sleep3000-style.css"> 
    <!-- 场景 1 end -->
    
    <!-- 场景 2 -->
    <!-- <script>
        console.log('before js')
    </script>
    <link rel="stylesheet" href="../css/sleep3000-style.css"> 
    <script src="../js/logDiv.js"></script> -->
    
    <!-- 场景 3 -->
    <!-- <script src="../js/block.js"></script> -->

</head>
<body>
        
    <!-- 场景 1、2、3 start-->
        <div></div>
    <!-- 场景 1、2、3 end-->
    <!-- 场景 4 start-->
    
        <div></div>
        <script></script>
        <script src="../js/sleep3000-logDiv.js"></script>
        <style>
            div{
                width: 100px;
                height: 100px;
                background: lightgray;
            }
        </style>
        <script src="../js/sleep5000-logDiv.js"></script>
        <link rel="stylesheet" href="../css/style.css">
   
    <!-- 场景 4 end-->
</body>
</html>